<template>
  <div class="content">
    <!-- <div>{{ zzKey }}</div> -->

    <div class="flz_w">
      <div class="left">
        <div  v-for="(item, index) in flzList" class="fln_item">
          <div :class="{ slcTit: slcIndex == index }" @click="slcFlz(item.name, index)" class="tit">{{ item.name.slice(1) }}</div>
          <div class="slc_btn"><div :class="{ slc_btn_bg: slcIndex == index }" class="m"></div></div>
          <!-- <i class="iconfont lricon-jinru" style="font-size: 13px;"></i> -->
        </div>
        <!-- <div style="min-height: calc(var(--nav_btn_height) + 1rem);"></div> -->
      </div>
      <div class="right">
        <div v-for="(item, index) in flzXq" class="r_item">
          <div @click="() => { if (item.zhankai == false) { item.zhankai = true } else { item.zhankai = false } }"
            class="top">
            <div class="index">{{ index + 1 }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="zhankai"><span>{{ item.zhankai ? '收起详情' : '展开详情' }} </span><span class="arrowi"
                :class="{ expandedi: true }"></span></div>
          </div>
          <div v-show="item.zhankai" class="bot">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Highlight } from "vant";
import { flzlist, getflz } from "../../api/fzzl/flz";

export default {
  name: "Test",
  async created() {
    console.log("分类战法");

    let flz = getflz('占疾病求医')
    console.log(flz);
    this.flzList = flzlist
    this.flzXq = flz
  },
  components: {
    Highlight,
  },
  data() {
    return {
      flzList: null,
      flzXq: null,
      slcIndex: 0
    };
  },
  props: {
    zzKey: {
      type: Object, // 指定类型为对象
      required: true, // 是否必传
      // 可选：对象的默认值（必须用函数返回，避免引用类型共享）
    },
  },
  methods: {
    slcFlz(name, index) {
      this.slcIndex = index
      this.flzXq = getflz(name)
    }
  },
  watch: {

  },
};
</script>

<style lang="scss" scoped>
$lcbgc: var(--lr_lcbgc);

.content {
  max-width: 96vw;
  height: calc(100vh - 135rem - var(--safe-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  margin-left: 2vw;
  background-color: $lcbgc;
 font-weight: 400;
  .flz_w {
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 135rem - var(--safe-top));
    height: calc(100vh - 135rem - var(--safe-top));
    display: flex;
    width: 96vw;
    justify-content: space-between;
    .slcTit{
      color: var(--cart_bg_color);
    }
    .left {
      height: calc(100vh - 135rem - var(--safe-top));
      width: 75px;
      display: flex;
      flex-direction: column;

      overflow: scroll;

     

      .fln_item {
        width: 75rem;
        .tit {
          padding-left: 5px;
          padding-right: 5px;
        }
          .slc_btn_bg {
           
        background-color: var(--cart_bg_color);
      }
       .slc_btn{
        height: 10rem;
        width: 10rem;
        border: 1.5rem solid var(--cart_bg_color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .m{
          width: 7px;
          height: 7rem;
          border-radius: 50%;
        }
       }
        flex-shrink: 0;
        margin-bottom: 5rem;
        margin-top: 5rem;
        height: 24px;
        font-size: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .right {
      overflow: scroll;

      width: calc(96vw - 85px);
      display: flex;
      flex-direction: column;
      align-items: center;

      height: calc(100vh - 135rem - var(--safe-top));
      max-height: calc(100vh - 135rem - var(--safe-top));

      .r_item {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 1vw;
        height: fit-content;
        border-radius: 4px;

        .top {
          height: 26px;
          width: calc(94vw - 85px);
          display: flex;
          align-items: center;
          font-size: 14px;
          justify-content: space-between;



          /* 箭头展开状态 - 向下 */
          .zhankai {
            color: #880E4F;

            .arrowi {
              /* 箭头初始状态 - 向上 */
              transform: rotate(0deg);
              /* 添加过渡动画，使旋转平滑 */
              transition: transform 0.3s ease;
              cursor: pointer;

            }

            .expandedi {
              transform: rotate(180deg) !important;
            }
          }

          .index {
            // background-color: rgb(141, 62, 245);
            color: var(--cart_bg_color);
            border-radius: 50%;
            height: 14px;
            font-size: 14px;
            width: 14px;
            line-height: 14px;
            text-align: center;
          }
        }

        .bot {
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #002c1c;
          width: calc(94vw - 85px);
        }
      }

    }
  }
}
</style>